<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background: yellow;
			position: relative;
			top: 0;
			left: 30px;
			float: left;
			margin-right: 100px;
			border:32px solid red;
/*			filter: alpha(opacity:30);
			opacity: .3;*/
		}
		
	</style>
	<script type="text/javascript">
	/*获取非行间样式*/
	function getStyle(obj,name){
		if(obj.currentStyle)
		{
			return obj.currentStyle[name];
		}
		else
		{
			return getComputedStyle(obj,false)[name];
		}
	}	
	//当变的是透明度时，改的方法
	//1.获取元素时 2.设置样式时
	window.onload=function(){
		var oDiv1=document.getElementById('div1');
		oDiv1.onmouseover=function(){
			startMove(this,'height',400,function(){
				startMove(this,'width',400);
			});
		}
		oDiv1.onmouseout=function(){
			startMove(this,'height',200);
		}
		
	}

	function startMove(obj,attr,iTarget){
		//function startMove(obj,iTarget){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){

			//var cur=parseInt(getStyle(obj,attr));//当为变的是透明度时，没用
			//var cur=parseInt(getStyle(obj,'height'));
			//cur是获取行间的样式
			var cur=0;//单纯的变量，不是参数

			if(attr=='opacity')//当获取的是透明度则用parseFloat
			{
				cur=Math.round(parseFloat(getStyle(obj,attr))*100);
					//乘上100因为，习惯透明度用100表示，也可以不用。
					//Math.round为四舍五入
			}
			else
			{
				cur=parseInt(getStyle(obj,attr));
			}
				//以上是获取传的参数是什么元素
			var speed=(iTarget -cur)/6;

			speed=speed>0?Math.ceil(speed):Math.floor(speed);

			if (cur==iTarget)
			{
				clearInterval(obj.timer);
			}
			else
			{
				if(attr=='opacity')//当为
				{
					obj.style.filter='alpha(opacity:'+(cur+speed)+')';
					obj.style.opacity=(cur+speed)/100;
					
				}
				else
				{
					obj.style[attr]=cur+speed+'px';//
					document.getElementById('ipt').value=oDiv1.style.height;
				}//判断获得的是那种
				//obj.style[attr]=cur+speed+'px';//透明度没有px
				//obj.style.height=cur+speed+'px';
			}
		},30)
	}
	// function startMove1(obj,iTarget){
	// 	clearInterval(obj.timer);
	// 	obj.timer=setInterval(function(){
	// 		var speed=(iTarget -obj.offsetWidth)/6;
	// 		speed=speed>0?Math.ceil(speed):Math.floor(speed);

	// 		if (obj.offsetWidth==iTarget)
	// 		{
	// 			clearInterval(obj.timer);
	// 		}
	// 		else
	// 		{
	// 			obj.style.width=obj.offsetWidth+speed+'px';
	// 		}
	// 	},30)
	// }	
	</script>
</head>
<body>
	<div id="div1">变高</div>
</body>
</html>